<template>
  <div class="panel">
    <div class="left">
      <i :class="iconName" :style="{ color: iconColor }"></i>
    </div>
    <div class="right">
      <h3>{{ title }}</h3>
      <p class="num"><countTo :start-val="startVal" :end-val="num" :duration="duration"></countTo></p>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
export default {
  components: { countTo },
  props: {
    iconName: {
      type: String,
      default: 'el-icon-s-custom'
    },
    title: {
      type: String,
      default: '猪八戒，快传值'
    },
    num: {
      type: Number,
      default: 324234
    },
    iconColor: {
      type: String,
      default: '#41c9c6'
    }
  },
  data() {
    return {
      // 需要滚动的时间
      duration: 3000,
      // 初始值
      startVal: 0
    }
  }
}
</script>

<style scoped lang="scss">
.panel {
  width: 23%;
  height: 108px;
  background-color: var(--main-bg-color);
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 10px 25px;
  .left {
    i {
      font-size: 50px;
    }
  }

  .right {
    h3 {
      font-size: 18px;
      color: #8c8c8c;
      margin: 0;
      margin-bottom: 10px;
    }
    .num {
      margin: 0;
      color: #666;
      font-weight: 700;
      font-size: 20px;
    }
  }
}
</style>
